import { FC } from 'react';
import { Card, Form, Input, Select, Button } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import type { ChartConfig as ChartConfigType } from '../../../types/report';
import styles from './ChartConfig.module.css';

interface ChartConfigProps {
  value: ChartConfigType;
  onChange: (value: ChartConfigType) => void;
  onDelete: () => void;
}

const { Option } = Select;

const ChartConfig: FC<ChartConfigProps> = ({
  value,
  onChange,
  onDelete
}) => {
  return (
    <Card
      className={styles.chartConfig}
      title={
        <Input
          value={value.title}
          onChange={e => onChange({ ...value, title: e.target.value })}
          placeholder="图表标题"
          bordered={false}
        />
      }
      extra={
        <Button
          type="text"
          danger
          icon={<DeleteOutlined />}
          onClick={onDelete}
        />
      }
    >
      <Form layout="vertical">
        <Form.Item label="图表类型">
          <Select
            value={value.type}
            onChange={type => onChange({ ...value, type })}
          >
            <Option value="line">折线图</Option>
            <Option value="bar">柱状图</Option>
            <Option value="pie">饼图</Option>
            <Option value="radar">雷达图</Option>
          </Select>
        </Form.Item>
      </Form>
    </Card>
  );
};

export default ChartConfig; 